import React from "react";

const FAQ = () => {
  return (
    <main className="text-lg px-64 py-8">
      <div className="flex flex-col gap-5">
        <p className="bg-slate-800 p-4 rounded-xl">
          <h2 className="pb-4 text-2xl font-extrabold">Стек технологий</h2>
          Данное приложение написано на <b>React 18</b> на языке <b>TypeScript</b> с использованием стейт-менеджера{" "}
          <b>MobX</b>, фреймворка для стилей <b>TailwindCSS</b>, а также UI-библиотеки <b>Ant Design</b>. Пагинация
          реализована с помощью <b>React Router V6</b>.
        </p>
        <p className="bg-slate-800 p-4 rounded-xl">
          <h2 className="pb-4 text-2xl font-extrabold">Общая информация</h2>
          Приложение дает возможность пользователю искать кинокартины согласно выставленным критериям поиска. Картины
          можно искать как по названию, так и по различным фильтрам:
          <ul className="py-4">
            <li>По году;</li>
            <li>По странам;</li>
            <li>По возрастному рейтингу;</li>
          </ul>
          Пользователь также может получить подробную информацию о картине при клике на ее карточку.
          <p className="pt-2">
            Возможные ошибки со стороны API обрабатываются - при неудачном запросе пользователь увидит на сайте
            соответствующее предупреждение.
          </p>
        </p>
        <p className="bg-slate-800 p-4 rounded-xl">
          <h2 className="pb-4 text-2xl font-extrabold">Дополнительные возможности</h2>В приложении есть страница, на
          которой можно получить случайный фильм, исходя из выставленных значений фильтров.
          <ul className="py-4">
            <li>По жанру;</li>
            <li>По типу картины (фильм/сериал/...);</li>
            <li>По сети производства (HBO, Netflix, ...);</li>
            <li>По рейтингу в кинопоиске;</li>
          </ul>
          <b>ВАЖНО</b>: для того, чтобы воспользоваться случайным поиском, необходимо предварительно авторизоваться
          (авторизация состоит из ввода имени пользователя и пароля - кнопка для авторизации находится в правом нижнем
          углу экрана).
          <div className="pt-2">
            <p>
              <b>Имя пользователя:</b> <i>elshappo</i>
            </p>
            <p>
              <b>Пароль:</b> <i>42</i>
            </p>
          </div>
        </p>
        <p className="bg-slate-800 p-4 rounded-xl">
          <h2 className="pb-4 text-2xl font-extrabold">Особенности реализации</h2>
          <ul>
            <li>
              Все фильтры, которые выставляет пользователь, сохраняются в поисковой строке, поэтому страницами с
              результатами фильтрации можно легко обмениваться;
            </li>
            <li>
              Когда пользователь ищет картины по их названию, перед отправкой запроса к API срабатывает тайм-аут в 1
              секунду (debounce);
            </li>
          </ul>
        </p>
      </div>
    </main>
  );
};

export default FAQ;
